<!doctype html>
<html><head>
	<meta charset="utf-8">
	<title>列表页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- common -->
	<link rel="stylesheet" href="/static/admin/css/common.css" media="all" />
	<script type="text/javascript" src="/static/admin/js/common-grid.js"></script>
</head>
<body style="padding: 10px 0 0 10px;">

<form class="layui-form" id="id_form_search" name="searchForm">
	<div class="layui-form-item">
		<input type="hidden" name="state" value="0">
		<input type="hidden" name="orderby" value="A.id">
		<input type="hidden" name="sorttype" value="desc">
		<div class="layui-inline">
			<div class="layui-input-inline bo-input-clear"><input name="userCode" type="text" class="layui-input" placeholder="请输入员工工号"></div>
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline bo-input-clear"><input name="code" type="text" class="layui-input" placeholder="请输入商品编码"></div>
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline bo-input-clear"><input name="asin" type="text" class="layui-input" placeholder="请输入竞品ASIN"></div>
		</div>

<div class="layui-collapse" lay-accordion="">
  <div class="layui-colla-item" onclick="changeCollapse(this)">
    <h2 class="layui-colla-title">更多搜索条件</h2>
    <div class="layui-colla-content">
		<div class="layui-inline">
			<div class="layui-input-inline bo-input-clear"><input name="userCode" type="text" class="layui-input" placeholder="请输入员工工号"></div>
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline bo-input-clear"><input name="code" type="text" class="layui-input" placeholder="请输入商品编码"></div>
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline bo-input-clear"><input name="asin" type="text" class="layui-input" placeholder="请输入竞品ASIN"></div>
		</div>
    </div>
  </div>
</div>
		<div class="layui-inline">
			<div class="layui-inline"><input type="checkbox" name="isCount" title="统计"></div>
		</div>
		<div class="layui-inline">
			<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm search_btn" lay-submit="" lay-filter="filter_form_search" style="margin-left: 35%;"><i class="layui-icon layui-icon-search"></i> 搜索</button>
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-danger layui-btn-sm clean_search_form_btn" style="margin-left: 35%;"><i class="layui-icon layui-icon-close"></i> 清空</a>
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-sm refresh_btn" style="margin-left: 35%;"><i class="layui-icon layui-icon-refresh"></i> 刷新</a>
			<script>
				// 刷新按钮
				$(".refresh_btn").click(function(){
					layer.confirm("确定刷新吗？",{
						btn: ['确定', '取消']
					}, function (index) {
						location.reload();
						layer.close(index);
					});
				});
			</script>
		</div>
	</div>
</form>

<table class="layui-hide" id="test" lay-filter="test"></table>
 
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
		<button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
		<button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>
		<button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
			重载测试
			<i class="layui-icon layui-icon-down layui-font-12"></i>
		</button>
		<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="multi-row">
			多行
		</button>
		<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="default-row">
			单行
		</button>
		<button class="layui-btn layui-btn-sm" id="moreTest">
			更多测试 
			<i class="layui-icon layui-icon-down layui-font-12"></i>
		</button>
	</div>
</script>
 
<script type="text/html" id="cityTpl">
	<select id="demoCity1" class="layui-border" lay-ignore>
		<option value="浙江杭州">浙江杭州</option>
		<option value="江西南昌">江西南昌</option>
		<option value="湖北武汉">湖北武汉</option>
	</select>
</script>
<script type="text/html" id="switchTpl">
	<!-- 这里的 checked 的状态只是演示 -->
	<input type="checkbox" name="sex2" value="{{ d.sex == '男' ? 0 : 1}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>
</script>
<script type="text/html" id="checkboxTpl">
	<!-- 这里的 checked 的状态只是演示 -->
	<input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
</script>
<script type="text/html" id="usernameTpl">
	<a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a>
</script>
 
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="sexTpl">
	{{#  if(d.sex === '女'){ }}
		<span style="color: #F581B1;">{{ d.sex }}</span>
	{{#  } else { }}
		{{ d.sex }}
	{{#  } }}
</script>

<script type="text/javascript">
var fn1 = function (field) {
    return function (data) {
        var value = 0;
        return [
            '<select name="type" lay-filter="type" lay-search="true" value="' + value + '">',
            '<option value="0"' + (value === 0 ? 'selected' : '') + '>国产</option>',
            '<option value="1"' + (value === 1 ? 'selected' : '') + '>进口</option>',
            '</select>'
        ].join('');
    };
};
</script>

<script>
layui
	.extend({optimizeSelectOption: '/static/plugins/layui/extends/optimizeSelectOption/optimizeSelectOption'})
	.use(['form', 'element', 'table', 'dropdown', 'optimizeSelectOption'], function(){
	var element = layui.element;
	var table = layui.table;
	var dropdown = layui.dropdown;
	var form = layui.form;
	
	/*
	layer.msg('本示例演示的数据为静态模拟数据，<br>实际使用时换成您的真实接口即可。', {
		closeBtn: 1,
		icon: 6,
		time: 21*1000,
		offset: '21px'
	});
	*/
	
	// 创建渲染实例
	table.render({
		elem: '#test'
		,url:'/static/admin/demo/demo1.json' // 此处为静态模拟数据，实际使用时需换成真实接口
		,toolbar: '#toolbarDemo'
		,defaultToolbar: ['filter', 'exports', 'print', {
			title: '帮助'
			,layEvent: 'LAYTABLE_TIPS'
			,icon: 'layui-icon-tips'
		}]
		,height: 'full-200' // 最大高度减去其他容器已占有的高度差
		,cellMinWidth: 80
		,totalRow: true // 开启合计行
		,page: true
		,skin: 'line'
		,even: true // 开启隔行背景
		,cols: [ [
			{type: 'checkbox', fixed: 'left'}
			,{field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRowText: '合计：'}
			,{field:'username', width:80, title: '用户', templet: '#usernameTpl'}
			,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text'}
			,{field:'sex', width:80, title: '性别', sort: true, templet: '#sexTpl', unresize: true}
			,{field:'sex2', width:80, title: '性别2', sort: true, templet: '#switchTpl', unresize: true}
			,{field:'city', width:115, title: '城市', minWidth:115, templet: '#cityTpl', exportTemplet: function(d, obj){
				console.log("data->>>>>>>>>>>>>>>>", obj);
				// 处理该字段的导出数据
				var td = obj.td(this.field); //获取当前 td
				return td.find('select').val();
			}}
			,{field:'type', title: '来源', width: 150, align: 'center', templet: fn1('type')}
			,{field:'sign', title: '签名', edit: 'textarea', minWidth: 260, style: '-moz-box-align: start;'}
			,{field:'experience', width: 100, title: '积分', sort: true, totalRow: '{{= d.TOTAL_NUMS }} 😊'} 
			,{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'}
			,{field:'ip', title:'IP', width: 120, style: 'background-color: #eee;'}
			,{field:'joinTime', title:'加入时间', width: 120}
			,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
			,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
			,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
			,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
			,{fixed: 'right', title:'操作', width: 125, minWidth: 125, toolbar: '#barDemo'}
			
		] ]
		,done: function(){
			var id = this.id;
			 
			// 重载测试
			dropdown.render({
				elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
				,data: [{
					id: 'reload',
					title: '重载'
				},{
					id: 'reload-deep',
					title: '重载 - 参数叠加'
				},{
					id: 'reloadData',
					title: '仅重载数据'
				},{
					id: 'reloadData-deep',
					title: '仅重载数据 - 参数叠加'
				}]
				// 菜单被点击的事件
				,click: function(obj){
					switch(obj.id){
						case 'reload':
							// 重载 - 默认（参数重置）
							table.reload('test', {
								where: {
									abc: '123456'
									//,test: '新的 test2'
									//,token: '新的 token2'
								}
								/*
								,cols: [ [ // 重置表头
								{type: 'checkbox', fixed: 'left'}
								,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
								,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
								,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
								,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
								,{field:'joinTime', title:'加入时间', width:120}
								] ]
								*/
							});
							break;
						case 'reload-deep':
							// 重载 - 深度（参数叠加）
							table.reload('test', {
								where: {
									abc: 123
									,test: '新的 test1'
								}
								//,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
								//,cols: ins1.config.cols
							}, true);
							break;
						case 'reloadData':
							// 数据重载 - 参数重置
							table.reloadData('test', {
								where: {
									abc: '123456'
									//,test: '新的 test2'
									//,token: '新的 token2'
								}
								,scrollPos: 'fixed'// 保持滚动条位置不变 - v2.7.3 新增
								,height: 2000 // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
								//,url: '404'
								//,page: {curr: 1, limit: 30} // 重新指向分页
							});
							break;
						case 'reloadData-deep':
							// 数据重载 - 参数叠加
							table.reloadData('test', {
								where: {
									abc: 123
									,test: '新的 test1'
								}
							}, true);
							break;
					}
					layer.msg('可观察 Network 请求参数的变化');
				}
			});
			
			// 更多测试
			dropdown.render({
				elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例
				,data: [{
					id: 'add',
					title: '添加'
				},{
					id: 'update',
					title: '编辑'
				},{
					id: 'delete',
					title: '删除'
				}]
				//菜单被点击的事件
				,click: function(obj){
					var checkStatus = table.checkStatus(id)
					var data = checkStatus.data; // 获取选中的数据
					switch(obj.id){
						case 'add':
							layer.open({
								title: '添加',
								type: 1,
								area: ['80%','80%'],
								content: '<div style="padding: 16px;">自定义表单元素</div>'
							});
							break;
						case 'update':
							if(data.length !== 1) return layer.msg('请选择一行');
							layer.open({
								title: '编辑',
								type: 1,
								area: ['80%','80%'],
								content: '<div style="padding: 16px;">自定义表单元素</div>'
							});
							break;
						case 'delete':
							if(data.length === 0){
								return layer.msg('请选择一行');
							}
							layer.msg('delete event');
							break;
					}
				}
			});
		}
		,error: function(res, msg){
			console.log(res, msg)
		}
	});
	
	// 工具栏事件
	table.on('toolbar(test)', function(obj){
		var id = obj.config.id;
		var checkStatus = table.checkStatus(id);
		var othis = lay(this);
		switch(obj.event){
			case 'getCheckData':
				var data = checkStatus.data;
				layer.alert(layui.util.escape(JSON.stringify(data)));
				break;
			case 'getData':
				var getData = table.getData(id);
				console.log(getData);
				layer.alert(layui.util.escape(JSON.stringify(getData)));
				break;
			case 'isAll':
				layer.msg(checkStatus.isAll ? '全选': '未全选')
				break;
			case 'multi-row':
				table.reload('test', {
					// 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
					lineStyle: 'height: 95px;' 
				});
				layer.msg('即通过设置 lineStyle 参数可开启多行');
				break;
			case 'default-row':
				table.reload('test', {
					lineStyle: null // 恢复单行
				});
				layer.msg('已设为单行');
				break;
			case 'LAYTABLE_TIPS':
				layer.alert('Table for layui-v'+ layui.v);
				break;
		};
	});
	 
	//触发单元格工具事件
	table.on('tool(test)', function(obj){ // 双击 toolDouble
		var data = obj.data;
		//console.log(obj)
		if(obj.event === 'del'){
			layer.confirm('真的删除行么', function(index){
				obj.del();
				layer.close(index);
			});
		} else if(obj.event === 'edit'){
			layer.open({
				title: '编辑',
				type: 1,
				area: ['80%','80%'],
				content: '<div style="padding: 16px;">自定义表单元素</div>'
			});
		}
	});
	 
	//触发表格复选框选择
	table.on('checkbox(test)', function(obj){
		console.log(obj)
	});
	 
	//触发表格单选框选择
	table.on('radio(test)', function(obj){
		console.log(obj)
	});
	
	// 行单击事件
	table.on('row(test)', function(obj){
		//console.log(obj);
		//layer.closeAll('tips');
	});
	// 行双击事件
	table.on('rowDouble(test)', function(obj){
		console.log(obj);
	});
	 
	// 单元格编辑事件
	table.on('edit(test)', function(obj){
		var field = obj.field //得到字段
		,value = obj.value //得到修改后的值
		,data = obj.data; //得到所在行所有键值
		
		var update = {};
		update[field] = value;
		obj.update(update);
	});
	
	//行单击事件（双击事件为：rowDouble）
	table.on('rowDouble(test)', function(obj){
		var data = obj.data;
		
		layer.alert(JSON.stringify(data), {
			title: '当前行数据：'
		});
		
		//标注选中样式
		obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
	});
	
	//性别操作
	form.on('switch(sexDemo)', function(data){
		layer.tips(this.value + ' ' + this.name + '：'+ data.elem.checked, data.othis);
	    var value = this.checked ? 1 : 0;
	    console.log("this->>>>>>>>>>>>>>", this);
	    console.log("value->>>>>>>>>>>>>>", value);
	    console.log("data->>>>>>>>>>>>>>", data);
	    modifyTableCacheBySwitch(data, value);
	});

	// 更新table的cache
	function modifyTableCacheBySwitch(data, value) {
	    var table = layui.table;
	    var switchElem = $(data.elem);
	    var tdElem = switchElem.closest('td');
	    var trElem = tdElem.closest('tr');
	    var tableView = trElem.closest('.layui-table-view');
	    console.log(table.cache[tableView.attr('lay-id')]);
	    table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = value;
	    
		var dataCommit = {};
		dataCommit['id'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['id'];
		dataCommit[tdElem.data('field')] = value;
		console.log(dataCommit);
	}
	
	//锁定操作
	form.on('checkbox(lockDemo)', function(obj){
		layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
	});
	
	// 下拉框选择事件修改表格缓存
	form.on('select(type)', function (data) {
	    console.log("data->>>>>>>>>>>>>>>>", data);
	    var selectElem = $(data.elem);
	    var tdElem = selectElem.closest('td');
	    var trElem = tdElem.closest('tr');
	    var tableView = trElem.closest('.layui-table-view');
	    table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = data.value;
	});

	// 搜索按钮
	form.on('submit(filter_form_search)', function(data){
		layui.table.reload("test",{
			page: {
				curr: 1
			},
			where: data.field
		})
		console.log(data.field);
		return false;
	});
	
	//折叠面板点击事件
	element.on('collapse(test_collapse)', function(data){
		//layer.msg('展开状态：'+ data.show);
	});
});

// 折叠搜索条件
function changeCollapse(dom) {
	if($(dom).find('.layui-colla-content').hasClass('layui-show') == false) {
		$(dom).find('.layui-colla-content').addClass('layui-show');
	} else {
		$(dom).find('.layui-colla-content').removeClass('layui-show');
	}
	
}
</script>

</body></html>